<template>
  <div class="purchase-submit">
    <div class="head-row">
      <div class="left">
        <img src="@/assets/dashboard/assetsApplication/left_arrow.png" alt="" @click="handleBank">
        <div class="page-title">新增申购</div>
      </div>
      <div class="right">
        <div class="save-btn" @click="handleSave">保存</div>
        <div class="save-submit-btn" @click="handleSubmit">保存并提交</div>
      </div>
    </div>
    <el-form class="content-row" ref="myForm" :model="formData" :rules="rules" label-position="left" label-width="80px">
      <div class="base-info">
        <div class="row w50">
          <el-form-item label="申购单号" prop="documentNumber">
            <el-input v-model="formData.documentNumber" placeholder="自动生成" readonly></el-input>
          </el-form-item>
        </div>
        <div class="row w50">
          <el-form-item label="申请部门" prop="applyDeptId">
            <el-cascader v-model="formData.applyDeptId" :options="departmentOptions" placeholder="请选择"></el-cascader>
          </el-form-item>
        </div>
        <div class="row w50">
          <el-form-item label="采购类型" prop="gmPurchaseType">
            <el-radio-group v-model="formData.gmPurchaseType">
              <el-radio :label="'0'">集团采购</el-radio>
              <el-radio :label="'1'">自主采购</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="row w50">
          <el-form-item label="是否入库" prop="gmStorage">
            <el-radio-group v-model="formData.gmStorage">
              <el-radio :label="'0'">是</el-radio>
              <el-radio :label="'1'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="row w50">
          <el-form-item label="使用人" prop="applyUser">
            <el-select v-model="formData.applyUser" filterable placeholder="请选择">
              <el-option
                v-for="(item,index) in applyUserList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="row w50">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="row w50" style="position: relative">
          <el-form-item label="收货地址" prop="storageLocationName">
            <el-input v-model="formData.storageLocationName" placeholder="请输入" @focus="openAddressModal"></el-input>
          </el-form-item>
          <address-selector
            :search-text="formData.storageLocationName"
            @close="closeAddressModal"
            v-if="showAddressModal"
          ></address-selector>
        </div>
        <div class="row w50">
          <el-form-item label="到货日期" prop="expectedDeliveryDate">
            <el-date-picker
              v-model="formData.expectedDeliveryDate"
              placeholder="请选择"
              type="date"
              value-format="yyyy-MM-dd"
              popper-class="dateSelectPopup"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div class="row w100">
          <el-form-item label="申请理由" prop="applyReason">
            <el-input v-model="formData.applyReason" placeholder="请输入" type="textarea" style="width: 100%"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="subscribe-list">
        <div class="title-row">
          <div class="left">
            <span class="title">申购清单</span>
            <span class="total">合计</span>
            <span class="value">¥{{ allTotalPrice }}</span>
          </div>
          <div class="add-goods-btn" @click="openGoodsManageModal">
            <img src="@/assets/dashboard/assetsApplication/orange_plus.png" alt="">
            <span>添加物品</span>
          </div>
        </div>
        <el-form-item label-width="0px" prop="activitiPurchaseGoodsList">
          <el-table
            class="subscribe-list-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            border
            :data="formData.activitiPurchaseGoodsList"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="物品名称"
              min-width="250"
            >
              <template slot-scope="scope">
                <div class="gmName-title">
                  <span class="gmName">{{ scope.row.name }}</span>
                  <div class="referPrice">参考单价：¥{{ scope.row.referPrice || '0' }}</div>
                </div>
                <div class="infoRow">
                  <span>编号：{{ scope.row.goodsId }}</span>
                  <span>品牌：{{ scope.row.brand }}</span>
                </div>
                <div class="infoRow">
                  <span>型号：{{ scope.row.model }}</span>
                  <span>规格：{{ scope.row.spec }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="number"
              label="申购数量"
              width="120"
            >
              <template slot-scope="scope">
                <el-input type="number" min="0" v-model="scope.row.number" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="isInStock"
              label="采购数量"
              width="120"
            >
              <template slot-scope="scope">
                <el-input type="number" min="0" v-model="scope.row.isInStock" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="referPrice"
              label="参考单价(¥)"
              width="120"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.referPrice" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="unitPrice"
              label="预购单价(¥)"
              width="120"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.unitPrice" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="referencePreSupplier"
              label="供应商"
              width="136"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="总价(¥)"
              width="108"
            >
              <template slot-scope="scope">
                <span style="color:#1677ff">¥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="160"
            >
              <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.remark" placeholder="请输入备注"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="operate"
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <div class="td-operate">
                  <span class="td-operate-btn" @click="updateGoods(scope.$index)">变更</span>
                  <span class="td-operate-btn danger" @click="delGoods(scope.$index)">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
      <div class="scrap-list">
        <div class="title-row">
          <div class="left">
            <span class="title">报废单</span>
            <span class="total">已关联</span>
            <span class="value">{{ formData.scrapList.length }}单</span>
          </div>
          <div class="add-scrap-btn" @click="openScrapManageModal">
            <img src="@/assets/dashboard/assetsApplication/orange_plus.png" alt="">
            <span>关联报废单</span>
          </div>
        </div>
        <el-form-item label-width="0px" prop="scrapList">
          <el-table
            class="scrap-list-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            border
            :data="formData.scrapList"
            style="width: 100%">
            <el-table-column
              prop="documentNumber"
              label="报废单号"
            >
            </el-table-column>
            <el-table-column
              prop="operation"
              label="操作"
              width="140px"
            >
              <template slot-scope="scope">
                <span class="audit-history-btn" @click="openScrapHistory(scope.row)">审核历史</span>
                <span class="delete-scrap-btn" @click="delScrap(scope.$index)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
      <div class="attachment-list">
        <div class="title-row">
          <div class="left">
            <span class="title">附件</span>
            <span class="total">共有附件</span>
            <span class="value">{{ formData.fileList.length }}个</span>
          </div>
          <div class="download-all-attachment">
            <img src="@/assets/dashboard/myPending/download1.png" alt="">
            <span>下载全部</span>
          </div>
        </div>
        <el-form-item prop="fileList" label-width="0">
          <div class="attachment-box">
            <div
              v-for="(item,index) in formData.fileList"
              class="attachment-item"
            >
              <div class="left">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_xls.png" alt="" v-if="getFileType(item.fileName)==='xls'||getFileType(item.fileName)==='xlsx'||getFileType(item.fileName)==='csv'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_doc.png" alt="" v-else-if="getFileType(item.fileName)==='doc'||getFileType(item.fileName)==='docx'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_ppt.png" alt="" v-else-if="getFileType(item.fileName)==='ppt'||getFileType(item.fileName)==='pptx'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_pdf.png" alt="" v-else-if="getFileType(item.fileName)==='pdf'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_txt.png" alt="" v-else-if="getFileType(item.fileName)==='txt'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_jpg.png" alt="" v-else-if="getFileType(item.fileName)==='jpg'||getFileType(item.fileName)==='png'||getFileType(item.fileName)==='pdf'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_zip.png" alt="" v-else-if="getFileType(item.fileName)==='zip'||getFileType(item.fileName)==='rar'||getFileType(item.fileName)==='7z'">
                <img src="@/assets/dashboard/searchResult/fileIcon/icon_other.png" alt="" v-else>
                <div class="info">
                  <div class="file-name">{{ item.fileName }}</div>
                  <div class="file-size">{{ item.size }}<span style="margin-left: 4px">KB</span></div>
                </div>
              </div>
              <div class="right">
                <div
                  class="preview-btn"
                  v-if="getFileType(item.fileName)==='jpg'||getFileType(item.fileName)==='png'||getFileType(item.fileName)==='pdf'"
                >
                  <img src="@/assets/dashboard/myPending/preview.png" alt="">
                  <span>预览</span>
                </div>
                <div
                  class="download-btn"
                >
                  <img src="@/assets/dashboard/myPending/download1.png" alt="">
                  <span>下载</span>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <goods-manage
      v-if="goodsManageModal.show"
      :show="goodsManageModal.show"
      :type="goodsManageModal.type"
      :info="goodsManageModal.info"
      @close="closeGoodsManageModal"
    ></goods-manage>
    <scrap-manage
      v-if="scrapManageModal.show"
      :show="scrapManageModal.show"
      :type="scrapManageModal.type"
      :info="scrapManageModal.info"
      @close="closeScrapManageModal"
    ></scrap-manage>
    <scrap-history
      v-if="scrapHistoryModal.show"
      :assets-data="scrapHistoryModal.assetsData"
      @close="closeScrapHistory"
    ></scrap-history>
  </div>
</template>

<script>
import addressSelector from "./components/addressSelector.vue";
import goodsManage from "./components/goodsManage.vue";
import scrapManage from "./components/scrapManage.vue";
import scrapHistory from './components/scrapHistory.vue'
export default {
  components: {
    addressSelector, goodsManage, scrapManage, scrapHistory,
  },
  name: "",
  props: {
    infoData: {
      type: Object,
      default: ()=>{
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        documentNumber: '',
        gmPurchaseType: '',
        gmStorage: '',
        applyDeptId: '',
        applyDeptName: '',
        applyUser: '',
        applyUserName: '',
        phone: '',
        storageLocationName: '',
        expectedDeliveryDate: '',
        applyReason: '',
        activitiPurchaseGoodsList: [],
        scrapId: '',
        scrapList: [],
        fileName: '',
        fileList: [
          {
            fileName: '图片.jpg',
            size: '233.33',
            fileId: '',
          },
          {
            fileName: '文档.doc',
            size: '233.33',
            fileId: '',
          },
          {
            fileName: '表格.xls',
            size: '233.33',
            fileId: '',
          },
          {
            fileName: '压缩包.zip',
            size: '233.33',
            fileId: '',
          },
        ],
        status: '',
      },
      nowAddress: {
        storageLocationId: '',
        storageLocationName: '',
      }, //收货地址信息
      showAddressModal: false,
      goodsManageModal: {
        show: false,
        type: 'add',
        info: {
          index: 0
        },
      },
      scrapManageModal: {
        show: false,
        type: 'add',
        info: {
          index: 0
        },
      },
      rules: {
        documentNumber: [
          { required: true, trigger: 'blur', message: '请输入申购单号' },
        ],
        gmPurchaseType: [
          { required: true, trigger: 'change', message: '请选择采购类型' },
        ],
        gmStorage: [
          { required: true, trigger: 'change', message: '请选择是否入库' },
        ],
        applyDeptId: [
          { required: true, trigger: 'change', message: '请选择申请部门' },
        ],
        applyUser: [
          { required: true, trigger: 'change', message: '请选择使用人' },
        ],
        phone: [
          { required: true, trigger: 'blur', message: '请输入电话' },
        ],
        storageLocationName: [
          { required: true, trigger: 'change', message: '请选择收货地址' },
        ],
        expectedDeliveryDate: [
          { required: true, trigger: 'change', message: '请选择到货日期' },
        ],
        applyReason: [
          { required: true, trigger: 'blur', message: '请输入申请理由' },
        ],
      },
      departmentOptions: [],
      applyUserList: [],
      btnDisabled: false,
      scrapHistoryModal: {
        show: false,
        assetsData: {},
      },
    }
  },
  computed: {
    allTotalPrice() {
      return this.formData.activitiPurchaseGoodsList.reduce((sum,item)=>{
        return sum + Number(item.total||0)
      },0).toFixed(2)
    },
  },
  mounted() {
  },
  methods: {
    //获取文件类型
    getFileType(fileName) {
      if(!fileName || typeof(fileName) !== 'string'){
        return ''
      }
      return fileName.split('.').pop()
    },
    //回退
    handleBank() {
      this.$emit('close')
    },
    //保存
    handleSave() {
      if(this.btnDisabled){
        return false
      }
      this.$refs['myForm'].validate((valid)=>{
        if(!valid){
          this.$showMsg('请先完善申请表','warning')
          return false
        }
      })
    },
    //保存并提交
    handleSubmit() {
      if(this.btnDisabled){
        return false
      }
      this.$refs['myForm'].validate((valid)=>{
        if(!valid){
          this.$showMsg('请先完善申请表','warning')
          return false
        }
      })
    },
    //地址选择弹窗
    openAddressModal() {
      this.showAddressModal = true
    },
    closeAddressModal(flag, addressData) {
      if(flag){
        this.nowAddress.storageLocationId = addressData.storageLocationId
        this.nowAddress.storageLocationName = addressData.storageLocationName
        this.formData.storageLocationName = addressData.storageLocationName
      }
      this.showAddressModal = false
    },
    //变更物品
    updateGoods(index) {
      this.goodsManageModal = {
        show: true,
        type: 'edit',
        info: {
          index
        },
      }
    },
    //删除物品
    delGoods(index) {
      this.formData.activitiPurchaseGoodsList.splice(index,1)
    },
    //添加物品弹窗
    openGoodsManageModal() {
      this.goodsManageModal = {
        show: true,
        type: 'add',
        info: {
          index: 0
        },
      }
    },
    closeGoodsManageModal(flag, type, row, index) {
      console.log(flag,type,row,index)
      if(flag){
        let goodsObj = {
          name: row.gmName,
          goodsId: row.goodsId,
          assetsType: row.gmAssetsType,
          model: row.gmModel,
          spec: row.gmSpec,
          defaultUnitName: row.gmDefaultUnitName,
          defaultUnit: row.gmDefaultUnit,
          proportion: row.gmProportion,
          unitPrice: row.referPrice,
          goodsType: row.wtmStatus==='5'?'监控设备':row.gmTypeName,
          brand: row.gmBrand,
          proc: row.gmProc,
          referPrice: row.referPrice,
          referencePreSupplier: row.referencePreSupplier,
          referenceCustomerNo: row.referenceCustomerNo,
          remark: '',
        }
        if(type === 'add'){
          this.formData.activitiPurchaseGoodsList.push(goodsObj)
        }
        else if(type === 'edit'){
          this.formData.activitiPurchaseGoodsList[index] = goodsObj
        }
      }
      this.goodsManageModal.show = false
    },
    //变更报废单
    updateScrap(index) {
      this.scrapManageModal = {
        show: true,
        type: 'edit',
        info: {
          index
        },
      }
    },
    //删除报废单
    delScrap(index) {
      this.formData.scrapList.splice(index,1)
    },
    //关联报废单弹窗
    openScrapManageModal() {
      this.scrapManageModal = {
        show: true,
        type: 'add',
        info: {
          index: 0
        },
      }
    },
    closeScrapManageModal(flag, sList) {
      if(flag){
        this.formData.scrapList = this.formData.scrapList.concat(sList)
      }
      this.scrapManageModal.show = false
    },
    //报废单审核历史
    openScrapHistory(row) {
      this.scrapHistoryModal.assetsData = this.$utilJs.deepClone(row)
      this.scrapHistoryModal.show = true
    },
    closeScrapHistory() {
      this.scrapHistoryModal.show = false
    },
  },
};
</script>
<style>
.dateSelectPopup {
  z-index: 10001 !important;
}
</style>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.purchase-submit {
  /deep/ .el-dialog__wrapper {
    position: absolute;
  }
  /deep/ .v-modal {
    position: absolute !important;
  }
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 10000;
  .head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #edebdf;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
      .page-title {
        margin-left: 20px;
        color: @textColor;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .save-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background-color: #fff;
        color: @textColor;
        font-size: 14px;
        line-height: 22px;
        padding: 5px 16px;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #cecece;
      }
      .save-submit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background-color: @ntalkColor;
        color: #fff;
        font-size: 14px;
        line-height: 22px;
        padding: 5px 16px;
        border-radius: 6px;
        cursor: pointer;
        margin-left: 8px;
      }
    }
  }
  .content-row {
    width: 100%;
    height: calc(100% - 56px);
    overflow-y: auto;
    background-color: #f2f3f6;
    .base-info {
      box-sizing: border-box;
      padding: 24px 24px 8px 24px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background-color: #fff;
      .row {
        display: flex;
        margin-bottom: 16px;
        /deep/ .el-form-item {
          margin-bottom: 0;
          width: calc(100% - 12px);
          .el-form-item__label {
            text-align: right;
          }
        }
        /deep/ .el-radio__input.is-checked+.el-radio__label {
          color: @ntalkColor;
        }
        /deep/ .el-radio__input.is-checked .el-radio__inner {
          border-color: @ntalkColor;
          background: @ntalkColor;
        }
        &.w100 {
          width: 100%;
        }
        &.w50 {
          width: 50%;
        }
      }
    }
    .subscribe-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      /deep/ .el-form-item {
        margin-bottom: 0;
      }
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .title {
            font-size: 16px;
            color: @textColor;
          }
          .total {
            margin-left: 16px;
            font-size: 12px;
            color: rgba(0,0,0,0.44);
          }
          .value {
            margin-left: 4px;
            font-size: 12px;
            color: #1677ff;
          }
        }
        .add-goods-btn {
          padding: 0 8px;
          border: 1px solid @ntalkColor;
          cursor: pointer;
          display: flex;
          align-items: center;
          border-radius: 4px;
          span {
            color: @ntalkColor;
            font-size: 14px;
            line-height: 22px;
            margin-left: 8px;
          }
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .subscribe-list-table {
        width: 100%;
        margin-top: 16px;
        border-radius: 6px;
        /deep/ .gmName-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .referPrice {
            margin-left: 8px;
            padding: 2px 8px;
            color: #8d8c85;
            background-color: #f0f0f0;
            border-radius: 4px;
          }
        }
        /deep/ .infoRow {
          display: flex;
          align-items: center;
          color: #8d8c85;
          span {
            white-space: nowrap;
            &:first-of-type {
              min-width: 150px;
            }
          }
        }
        /deep/ .td-operate {
          display: flex;
          align-items: center;
          .td-operate-btn {
            font-size: 14px;
            line-height: 22px;
            cursor: pointer;
            margin-left: 10px;
            color: #e67529;
            &:first-child {
              margin-left: 0;
            }
            &.danger {
              color: #ff4040;
            }
          }
        }
      }
    }
    .scrap-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      /deep/ .el-form-item {
        margin-bottom: 0;
      }
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .title {
            font-size: 16px;
            color: @textColor;
          }
          .total {
            margin-left: 16px;
            font-size: 12px;
            color: rgba(0,0,0,0.44);
          }
          .value {
            margin-left: 4px;
            font-size: 12px;
            color: #1677ff;
          }
        }
        .add-scrap-btn {
          padding: 0 8px;
          border: 1px solid @ntalkColor;
          cursor: pointer;
          display: flex;
          align-items: center;
          border-radius: 4px;
          span {
            color: @ntalkColor;
            font-size: 14px;
            line-height: 22px;
            margin-left: 8px;
          }
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .scrap-list-table {
        width: 100%;
        margin-top: 16px;
        border-radius: 6px;
        /deep/ .audit-history-btn {
          color: @ntalkColor;
          cursor: pointer;
        }
        /deep/ .delete-scrap-btn {
          color: #ff4040;
          cursor: pointer;
          margin-left: 10px;
        }
      }
    }
    .attachment-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      /deep/ .el-form-item {
        margin-bottom: 0;
      }
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .title {
            font-size: 16px;
            color: @textColor;
          }
          .total {
            margin-left: 16px;
            font-size: 12px;
            color: rgba(0,0,0,0.44);
          }
          .value {
            margin-left: 4px;
            font-size: 12px;
            color: #1677ff;
          }
        }
        .download-all-attachment {
          padding: 0 8px;
          border: 1px solid @ntalkColor;
          cursor: pointer;
          display: flex;
          align-items: center;
          border-radius: 4px;
          span {
            color: @ntalkColor;
            font-size: 14px;
            line-height: 22px;
            margin-left: 8px;
          }
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .attachment-box {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 16px;
        margin-top: 18px;
        .attachment-item {
          padding: 0 12px;
          height: 74px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 6px;
          border: 1px solid #f2f3f6;
          .left {
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
            }
            .info {
              margin-left: 8px;
              .file-name {
                font-size: 14px;
                line-height: 22px;
                color: @textColor;
                white-space: nowrap;
              }
              .file-size {
                font-size: 12px;
                line-height: 20px;
                color: rgba(0,0,0,0.44);
              }
            }
          }
          .right {
            display: flex;
            align-items: center;
            .preview-btn {
              margin-right: 8px;
            }
            .preview-btn, .download-btn {
              cursor: pointer;
              padding: 0 8px;
              display: flex;
              align-items: center;
              img {
                width: 16px;
                height: 16px;
                margin-right: 8px;
              }
              span {
                font-size: 14px;
                line-height: 22px;
                color: @ntalkColor;
              }
            }
          }
        }
      }
    }
  }
}
</style>
